<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>form-create frame组件Dome</title>
    <style>
        .fc-files {
            display: inline-block;
            width: 58px;
            height: 58px;
            text-align: center;
            line-height: 60px;
            border: 1px solid transparent;
            border-radius: 4px;
            overflow: hidden;
            background: #fff;
            position: relative;
            box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
            margin-right: 4px;
            box-sizing: border-box;
        }

        .fc-files img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .fc-files.on {
            background: #40d0c3;
            padding: 1px;
        }
    </style>
</head>

<body>
    <div class="fc-files"><img src="http://iph.href.lu/100x100?text=f&fg=ffffff&bg=cfe2f3"></div>
    <div class="fc-files"><img src="http://iph.href.lu/100x100?text=o&fg=ffffff&bg=cfe2f3"></div>
    <div class="fc-files"><img src="http://iph.href.lu/100x100?text=r&fg=ffffff&bg=cfe2f3"></div>
    <div class="fc-files"><img src="http://iph.href.lu/100x100?text=m&fg=ffffff&bg=cfe2f3"></div>
    <div class="fc-files"><img src="http://iph.href.lu/100x100?text=-&fg=ffffff&bg=cfe2f3"></div>
    <div class="fc-files"><img src="http://iph.href.lu/100x100?text=c&fg=ffffff&bg=cfe2f3"></div>
    <div class="fc-files"><img src="http://iph.href.lu/100x100?text=r&fg=ffffff&bg=cfe2f3"></div>
    <div class="fc-files"><img src="http://iph.href.lu/100x100?text=e&fg=ffffff&bg=cfe2f3"></div>
    <div class="fc-files"><img src="http://iph.href.lu/100x100?text=a&fg=ffffff&bg=cfe2f3"></div>
    <div class="fc-files"><img src="http://iph.href.lu/100x100?text=t&fg=ffffff&bg=cfe2f3"></div>
    <div class="fc-files"><img src="http://iph.href.lu/100x100?text=e&fg=ffffff&bg=cfe2f3"></div>
    <div class="fc-files"><img src="http://iph.href.lu/100x100?text=d&fg=ffffff&bg=cfe2f3"></div>

    <button id="closeBtn">关闭页面</button>
    <button onclick="onUnload()">立即修改</button>

    <script>
        window.onload = function () {

            setTimeout(function () {
                //获取fodder字段值
                var value = form_create_helper.get('fodder'),
                    images = Array.from(self.document.getElementsByTagName('img'));
                //选中对应的图片
                images.forEach(function (image) {
                    if (value.indexOf(image.src) !== -1) {
                        image.parentNode.classList.add('on');
                    } else {
                        image.parentNode.classList.remove('on');
                    }
                    image.addEventListener('click', onClick)
                });

                function onClick() {
                    var p = this.parentNode;
                    if (Array.from(p.classList).indexOf('on') !== -1) {
                        p.classList.remove('on');
                    } else {
                        p.classList.add('on');
                    }
                }

                document.getElementById('closeBtn').addEventListener('click', function () {
                    //手动关闭frame弹出框
                    form_create_helper.close('fodder');
                });


                //当页面关闭时更新frame字段的值
                window.onUnload = function () {
                    var list = [];
                    images.forEach(function (image) {
                        if (Array.from(image.parentNode.classList).indexOf('on') !== -1) {
                            list.push(image.src);
                        }
                    });

                    //修改表单fodder字段的值
                    form_create_helper.set('fodder', list);
                }
                window.onunload = onUnload;
            });
        }
    </script>
</body>

</html>